@import '../../css/Variable.styl'

[dir=ltr] .wsContentGeneric
  right 0

[dir=rtl] .wsContentGeneric
  left 0

.wsContentGeneric
  background-color lightGrey2
  height 100%
  position fixed
  width "calc(100% - %s)" % closedSidebarWidth
  z-index 9
  &.sidebarVisible
    max-width "calc(100% - %s)" % sidebarWidth
  &.visible
    visibility visible
  &__header
    display flex
    align-items center
    height headerHeight
    min-height headerHeight
    border-bottom 1px solid lightGrey1
    margin 0 pageSpacing
    &__titleWithBreadcrumbs
      flex auto
      overflow hidden
      width 100%
    &__titleWrapper
      display flex
      align-items center
    &__edittitle
      padding 0
      margin-inline-start standardSpacing
    & > .favoriteButton
      margin 0 textSpacing
      & .iconbutton__icon
        margin 0
    & > *
      margin-inline-end standardSpacing
    & > .dropdown
      margin 0
    &__actions
      &.dropdownMenuButton
        color fontColor
        padding (standardSpacing / 2)
        margin 0
        & i
          margin 0
      &::after
        display none
      &__item
        &.isImage
          display flex
          align-items center
        &.addSeparator
          border-top borderStyle
        &__image
          width 20px
          height 20px
          margin-inline-end 5px
        &__text
          margin-inline-start 5px
    &__icon
      font-size titleFontSize
      margin-inline-end standardSpacing
    &__title
      display flex
      font-size titleFontSize
      font-weight bold
      text-overflow ellipsis
      overflow hidden
      white-space nowrap
      width 100%
      & > div
        text-overflow ellipsis
        overflow hidden
      & > input
        padding-inline-start textSpacing
        border-radius standardBorderRadius
        border 1px solid lightGrey1
        flex auto
    &__reactions
      flex 1
      & > .EmojiReactions
        flex-wrap wrap-reverse
      & .EmojiReactionButton__buttonpicker
        color fontColor
        padding 0
    &__close
      margin-inline-start standardSpacing
      margin-inline-end 0
      cursor pointer
      & > i
        font-size titleFontSize
        vertical-align middle
  &__option
    &__menu
      & > div
        display flex
        flex-flow row
        justify-content space-between
        align-items center
        height 100%
      &__addversion
        display flex
        align-items center
        cursor pointer
      &__action
        font-size titleFontSize
        background-color transparent
        border none
        cursor pointer
        &:hover , &:focus
          color blue
  &__content
    display flex
    flex-wrap wrap
    width 200% // to allow transform translateX of right part
    height 100%
    &__state
      width 100%
      padding 5px 15px
      border-radius standardBorderRadius
      background-color #fbe294
    &__left
      transition width 0.4s ease
      width 30%
      height 100%
      &__top
        display flex
        align-items center
        min-height 38px // INFO - CH - 2024-04-25 - 38 is height of emoji
        color darkGrey2
        font-size metadataFontSize
        padding standardSpacing pageSpacing 0
        justify-content flex-end
        & .breadcrumbs
          margin-inline-end auto
          overflow auto
        &__emojiReaction
          order 1
          .EmojiReactions
            flex-direction row
        &__version
          order 2
          display flex
          white-space nowrap
          &::before
            content '-'
            display block
            margin 0 4px 0 0
        &__lastversion
          order 3
          margin-inline-start 5px
          font-weight bold
          white-space nowrap
        &__selectStatus
          order 4
          display flex
          &::before
            content '-'
            display block
            margin 0 4px
    &__right
      display flex
      transition width 0.4s ease
      width 20%
      height 100%
      &__content
        width calc(100% - 65px) // 65px is the width of the rightPart header
        overflow-y auto
        &__title
          height headerHeight
          padding standardSpacing
          font-size titleFontSize
          display flex
          align-items center
      &__header
        display flex
        flex-direction column
        width 65px
        background-color lightGrey1
        font-size titleFontSize
        cursor pointer
        &__icon
          cursor pointer
          border none
          height 65px
          background-color lightGrey1
          color fontColor
          border-inline-start 5px solid transparent
          &:focus
            border-color transparent
            outline 0
          &.active
            background-color lightGrey2
          &__close
            text-align center
            cursor pointer
            margin auto 0 15px
        .loading
          flex 1
          display flex
          &__text
            flex 1
  & .headerBtn
    margin-inline-end 0
    &__link
      color fontColor
      &__disabled
        cursor not-allowed
        opacity 0.5
      &:hover
        color fontColor

.rightPartClose
  .wsContentGeneric__content
    &__left
      width calc(50% - 65px) // 65px is the width of the rightPart header
    &__right__header__icon.active
      background-color lightGrey1
      border none

responsiveColumnStyle()
  .wsContentGeneric__content__right
    display flex
    flex-direction column
    margin 0
    &__header
      flex-direction row
      width 100%
      height 65px
      justify-content flex-end
      &__icon
        transform none
        border-inline-start-width 0
        margin-inline-start textSpacing
        padding standardSpacing
        width 65px
        border-top 5px solid
        & > i
          margin auto
        &__close
          display none
    &__content
      width 100%
      overflow visible
  .rightPartClose
    .wsContentGeneric__content__right__header__icon.active
      border-top 5px solid

.componentTitle
  overflow hidden
  text-overflow ellipsis
  unicode-bidi plaintext

@media (max-width: max-lg)
  .rightPartClose
    .wsContentGeneric__content__left
      width 100%

@media (min-width: min-lg) and (max-width: max-lg)
  .wsContentGeneric
    &__content
      overflow-Y auto
      width 100%
      &__left
        width 100%
        height auto
      &__right
        width 100%
        height auto
  responsiveColumnStyle()

@media (min-width: min-md) and (max-width: max-md)
  .headerBtn
    & span
      display none
  .wsContentGeneric
    &__content
      overflow-Y auto
      width 100%
      &__left
        width 100%
        height auto
        &__textnote
          height auto
          overflow-y hidden
      &__right
        width 100%
        height auto
  responsiveColumnStyle()

@media (min-width: min-sm) and (max-width: max-sm)
  .headerBtn
    & span
      display none
  .wsContentGeneric
    &__content
      overflow-Y auto
      width 100%
      &__left
        width 100%
        height auto
        &__textnote
          height auto
          overflow-y hidden
      &__right
        width 100%
        height auto
  responsiveColumnStyle()

@media (max-width: max-xs)
  .headerBtn
    & span
      display none
  .wsContentGeneric
    &__header__isEditing
      display list-item
      height fit-content
      margin 0
      .dropdown
        display inline-block
        height 24px
      .wsContentGeneric__header__titleWrapper
        display inherit
    &__header__close
      display inline-block
      height 24px
    &.sidebarVisible
      max-width 100%
    &__option
      display none
    &__content
      overflow-Y auto
      width 100%
      &__left
        width 100%
        height auto
        &__textnote
          height auto
          overflow-y hidden
        &__top
          flex-wrap wrap
          &__emojiReaction
            order 10
      &__right
        width 100%
        height auto
  responsiveColumnStyle()
